<template>
<div class="illustration_box">
    <div class="illustration_title">
        {{data.title}}
        <span class="left_arrow"></span>
        <span class="right_arrow"></span>
    </div>
    <img :src="data.src" alt="{{}}">
    <div>
    <!--中餐推荐-->
    <slide-list v-for="(item,index) in data.data" :key="index" :data="item"></slide-list>
    </div>
</div>
</template>

<script>
import slidelist from './SlideList.vue';
export default {
    props: ['data'],
    components: {
        'slide-list': slidelist
    },
    mounted(){
    },
    data() {
        return {
        }

    },
}
</script>

<style lang="less">
.illustration_box {
    width: 100%;
    margin-top: 0.6rem;
    .illustration_title {
        float: left;
        width: auto;
        height: 0.36rem;
        line-height: 0.36rem;
        padding: 0 0.15rem;
        margin-left: 0.2rem;
        margin-bottom: 0.08rem;
        position: relative;
        font-size: 0.25rem;
        color: #F23526;

        span {
            position: absolute;
            width: 0.17rem;
            height: 0.17rem;
            border: 0.02rem solid #F23526;
        }

        .left_arrow {
            left: 0px;
            top: 0px;
            border-color: #F23526 transparent transparent #F23526
        }

        .right_arrow {
            right: 0px;
            bottom: 1px;
            border-color: transparent #F23526 #F23526 transparent;
        }
    }

}
</style>
